<!--  -->
<template>
  <div class="dashboard">
    <el-dialog
      :title="state ? '编辑店铺' : '添加店铺'"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="submitData"
        status-icon
        :label-position="labelPosition"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="flex-col-24 upload-wrapper">
          <span class="label">店铺LOGO</span>
          <div class="upload-box">
            <el-upload
              action="#"
              :show-file-list="false"
              :auto-upload="false"
              :multiple="false"
              :on-change="uploadFile"
              drag
              accept="image/jpg,image/jpeg,image/png"
            >
              <i
                v-if="imageUrl"
                class="el-icon-circle-close deleteImg"
                @click.stop="handleRemove"
              ></i>
              <img
                v-if="imageUrl"
                :src="imageUrl"
                class="el-upload--picture-car"
              />
              <div
                style="
                  display: flex;
                  align-item: center;
                  flex-direction: column;
                  justify-content: center;
                  background-color: var(--bg-primary-color);
                  height: 100%;
                "
                v-else
              >
                <i
                  class="el-icon-picture"
                  style="font-size: 40px; color: #d9d9d9"
                ></i>
              </div>
            </el-upload>
            <el-button
              class="send"
              plain
              type="primary"
              size="small"
              @click="submitOrder"
              >上传图片</el-button
            >
          </div>
        </div>
        <div class="flex-col-12">
          <el-form-item label="店铺名称" prop="storeName">
            <el-input v-model="submitData.storeName"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div class="today-data flex-row flex-col-24">
      <div class="wrap flex-col-6">
        <div class="card flex-col-24 today-data-item">
          <div class="today-data-item-header">
            店铺信息<span class="tag edit" @click="editData">修改</span>
          </div>
          <div class="today-data-item-body store-info">
            <div class="store-logo">
              <img v-if="storeInfo.logo" :src="`${$upload_path}/${storeInfo.logo}`" alt="" />
            </div>
            <div class="store-name">
              {{ storeInfo.storeName }}
            </div>
          </div>
        </div>
      </div>
      <div class="wrap flex-col-6">
        <div class="card flex-col-24 today-data-item">
          <div class="today-data-item-header">
            营业额<span class="tag">月</span>
          </div>
          <div class="today-data-item-body">
            <p class="number">
              <span class="label">&yen;</span
              >{{ turnoverInfo.turnover ? turnoverInfo.turnover : 0 }}
            </p>
            <p class="bottom-data">
              总销售额<span class="float-right"
                >{{ turnoverInfo.turnover ? (turnoverInfo.amount / 10000).toFixed(2) : 0 }} 万</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="wrap flex-col-6">
        <div class="card flex-col-24 today-data-item">
          <div class="today-data-item-header">
            订单量<span class="tag">月</span>
          </div>
          <div class="today-data-item-body">
            <p class="number">
              {{ orderInfo.orderCount ? orderInfo.orderCount : 0 }}
            </p>
            <p class="bottom-data">
              订单完成率<span class="float-right"
                >{{
                  orderInfo.rate ? (orderInfo.rate * 100).toFixed(2) : 0
                }}%</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="wrap flex-col-6">
        <div class="card flex-col-24 today-data-item">
          <div class="today-data-item-header">商品数量</div>
          <div class="today-data-item-body">
            <p class="number">
              {{ goodsInfo.goodsCount }}
            </p>
            <p class="bottom-data">
              品牌数量<span class="float-right">{{
                goodsInfo.brandCount
              }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-container flex-row flex-col-24">
      <div class="chart flex-col-16">
        <div class="card chart-item">
          <StoreRecentOrderChart></StoreRecentOrderChart>
        </div>
      </div>
      <div class="chart flex-col-8">
        <div class="card chart-item">
          <StoreOrderChart :allData="salesTop10"></StoreOrderChart>
        </div>
      </div>
      <div class="chart flex-col-8">
        <div class="card chart-item">
          <StoreStockChart :allData="goodsStock"></StoreStockChart>
        </div>
      </div>
      <div class="chart flex-col-8">
        <div class="card chart-item">
          <StoreTypeChart></StoreTypeChart>
        </div>
      </div>
      <div class="chart flex-col-8">
        <div class="card chart-item">
          <StoreOrderStatusChart :totalOrder="orderInfo.amount"></StoreOrderStatusChart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getGoods,
  getTurnover,
  getOrder,
  getSalesTop10,
  getGoodsStock,
  getGoodsType,
} from '@/api/report'
import { getStoreInfo, update } from '@/api/store'
import { handleVoidMethod } from '@/api/table'
import StoreOrderChart from '@/components/StoreOrderChart'
import StoreStockChart from '@/components/StoreStockChart'
import StoreTypeChart from '@/components/StoreTypeChart'
import StoreRecentOrderChart from '@/components/StoreRecentOrderChart'
import StoreOrderStatusChart from '@/components/StoreOrderStatusChart'
export default {
  components: {
    StoreOrderChart,
    StoreStockChart,
    StoreTypeChart,
    StoreRecentOrderChart,
    StoreOrderStatusChart,
  },
  data() {
    return {
      turnoverInfo: {},
      goodsInfo: {},
      orderInfo: {},
      storeInfo: {},
      salesTop10: [],
      goodsStock: [],
      goodsType: [],
      submitData: {
        storeName: '',
        logo: '',
        status: '',
      },
      rules: {
        name: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
      },
      state: false,
      loading: false,
      imageUrl: '',
      labelPosition: 'right',
      dialogFormVisible: false,
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    async getTableData() {
      const { data: res } = await getTurnover()
      this.turnoverInfo = res ? res : {}
      const { data: goods } = await getGoods()
      this.goodsInfo = goods ? goods : {}
      const { data: order } = await getOrder()
      this.orderInfo = order ? order : {}
      const { data: salesTop10 } = await getSalesTop10()
      this.salesTop10 = salesTop10 ? salesTop10 : []
      const { data: goodsStock } = await getGoodsStock()
      this.goodsStock = goodsStock
      const { data: goodsType } = await getGoodsType()
      this.goodsType = goodsType ? goodsType : []
      const { data: storeInfo } = await getStoreInfo()
      this.storeInfo = storeInfo
    },
    uploadFile(item) {
      this.formData = item.raw // 图片文件
      this.imageUrl = URL.createObjectURL(item.raw) // 图片上传浏览器回显地址
      console.log(this.imageUrl, 'imageUrl')
      console.log(this.formData, 'formData')
    },
    handleRemove() {
      this.imageUrl = ''
      this.formData = null
      console.log(this.formData)
      console.log('QAQ')
    },
    async submitOrder() {
      var formData = new FormData()
      formData.append('file', this.formData) // 照片文件
      const { data: res, code } = await upload(formData)
      if (code === 200) {
        this.$message({ type: 'success', message: '上传成功' })
      } else {
        this.$message({ type: 'error', message: '上传失败' })
      }
      this.submitData.logo = res
    },
    cancel() {
      this.submitData = {}
      this.dialogFormVisible = false
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.state
            ? handleVoidMethod(
                this,
                '修改成功',
                '修改失败',
                update(this.submitData),
                this.cancel
              )
            : handleVoidMethod(
                this,
                '添加成功',
                '添加失败',
                insert(this.submitData),
                this.cancel
              )
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    editData() {
      this.state = true
      const store = JSON.parse(JSON.stringify(this.storeInfo))
      this.imageUrl = store.logo ? `${this.$upload_path}/${store.logo}` : ''
      delete store.subscribe
      delete store.sold
      delete store.comments
      this.submitData = store
      console.log(this.submitData);
      this.dialogFormVisible = true
    },
  },
}
</script>

<style lang="less" scoped>
.today-data {
  width: 100%;
  flex-wrap: wrap;
}
.wrap {
  box-sizing: border-box;
  padding: 10px;
  height: 160px;
}
.today-data-item {
  height: 100%;
}
.today-data-item-header {
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tag {
    background-color: rgb(215, 255, 255);
    border-color: aqua;
    height: 24px;
    padding: 0 10px;
    line-height: 24px;
    font-size: 12px;
    color: aqua;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
    &.edit {
      color: #e6a23c;
      background: #fdf6ec;
      border-color: #f5dab1;
      cursor: pointer;
    }
  }
}
.today-data-item-body {
  padding: 10px 15px;
  .number {
    font-size: 36px;
    line-height: 36px;
    padding: 8px 0 10px;
    overflow: hidden;
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
  }
  .label {
    font-size: 26px;
    line-height: 1;
    margin: 0 5px;
    vertical-align: middle;
  }
  .bottom-data {
    height: 24px;
    font-size: 14px;
    line-height: 24px;
  }
}
.chart-container {
  flex-wrap: wrap;
}
.chart {
  height: 300px;
  padding: 10px;
  box-sizing: border-box;
  .chart-item {
    height: 100%;
  }
}

.store-info {
  display: flex;
}
.store-name {
  font-size: 20px;
  line-height: 50px;
  font-weight: bolder;
}
.store-logo {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: 0 0 10px #bfa;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}

/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/deep/ .el-upload-dragger {
  width: 100px;
  height: 100px;
}

.deleteImg {
  font-size: 20px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}

img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
.upload-wrapper {
  display: flex;
  margin-bottom: 20px;
  .label {
    box-sizing: border-box;
    width: 100px;
    padding: 0 12px 0 0;
    text-align: center;
    color: var(--text-normal-color);
    transition: var(--tran-01);
  }
  .send {
    width: 100px;
    margin-top: 10px;
  }
}

.edit {
  margin-right: 10px;
}
</style>
